<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="keywords" content="{$seo_keywords}">
<meta name="description" content="{$seo_description}">
<title>{$seo_title}</title>
<link rel="icon" href="/upload/favicon.ico">
<link rel="stylesheet" href="/themes/template/static/css/element.min.css">
<link rel="stylesheet" href="/themes/template/static/css/animate.min.css">
<link rel="stylesheet" href="/themes/template/static/css/swiper.min.css">
<link rel="stylesheet" href="/themes/template/static/css/onekey.min.css">
<script type="text/javascript" src="/themes/template/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/themes/template/static/js/wow.min.js"></script>
<script type="text/javascript" src="/themes/template/static/js/vue.min.js"></script>
<script type="text/javascript" src="/themes/template/static/js/swiper.min.js"></script>
<script type="text/javascript" src="/themes/template/static/js/element.min.js"></script>
<script type="text/javascript" src="/themes/template/static/js/common.js"></script>
</head>
<body>
<div id="header" v-cloak>
    <div class="el-navigation" :class="{down: down}">
        <div class="el-warp">
            <a class="el-logo" href="{url('/')}"><img :src="down ? '{$system.copy_logo}' : '{$system.logo}'"></a>
            <div class="el-mobile-menu">
                <el-dropdown class="el-language">
                    <span>{:lang($language)}</span>
                    <el-dropdown-menu slot="dropdown">
                        {volist name="langAllow" id="item"}
                        <li class="el-language-item"><a href="{$item.url}">{:lang($item.name)}</a></li>
                        {/volist}
                    </el-dropdown-menu>
                </el-dropdown>
                <i class="el-icon-menu" @click="open = true"></i>
            </div>
            <el-menu class="el-menu-list" :class="{open: open}" :mode="clientWidth > 992 ? 'horizontal' : 'vertical'">
                {volist name="catalogHeader" id="item1"}
                <component index="{$item1.id}" is="{if isset($item1.children)}el-submenu{else/}el-menu-item{/if}" class="{if $catalog.level1 == $item1.id}active{/if}">
                    <template slot="title">
                        <a href="{$item1.url}">{$item1.title}</a>
                    </template>
                    {if isset($item1.children)}
                    {volist name="item1.children" id="item2"}
                    <component index="{$item2.id}" is="{if isset($item2.children)}el-submenu{else/}el-menu-item{/if}" >
                        <template slot="title">
                            <a href="{$item2.url}">{$item2.title}</a>
                        </template>
                        {if isset($item2.children)}
                        {volist name="item2.children" id="item3"}
                        <el-menu-item index="{$item3.id}">
                            <a href="{$item3.url}">{$item3.title}</a>
                        </el-menu-item>
                        {/volist}
                        {/if}
                    </component>
                    {/volist}
                    {/if}
                </component>
                {/volist}
                <el-menu-item>
                    <a href="{:url('search')}">{:lang('station search')}</a>
                </el-menu-item>
                <el-menu-item>
                    <a href="{:url('user/index')}">{:lang('personal center')}</a>
                </el-menu-item>
                <el-dropdown class="el-language">
                    <span>{:lang($language)}</span>
                    <el-dropdown-menu slot="dropdown">
                        {volist name="langAllow" id="item"}
                        <li class="el-language-item"><a href="{$item.url}">{:lang($item.name)}</a></li>
                        {/volist}
                    </el-dropdown-menu>
                </el-dropdown>
                <i class="el-icon-close" @click="open = false"></i>
            </el-menu>
        </div>
    </div>
    <div class="el-banner">
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="{$catalog.cover}">
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: '#header',
        data() {
            return {
                open: false,
                scrollTop: document.body.scrollTop || document.documentElement.scrollTop,
                clientWidth: document.body.clientWidth || document.documentElement.clientWidth,
            }
        },
        computed: {
            down() {
                return this.scrollTop > 80 || '{$catalog.seo_url}' !== 'index';
            }
        },
        mounted() {
            window.onscroll = () => {
                return (() => {
                    this.scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
                })()
            }
            window.onresize = () => {
                return (() => {
                    this.clientWidth = (document.body.clientWidth || document.documentElement.clientWidth) + 10;
                })()
            },
            new Swiper(".el-banner .swiper", {
                loop: true,
                effect : 'fade',
                fadeEffect: {
                    crossFade: true,
                },
                pagination: {
                    el: ".el-banner .swiper-pagination",
                    type: "fraction",
                },
                navigation: {
                    nextEl: ".el-banner .swiper-button-next",
                    prevEl: ".el-banner .swiper-button-prev",
                },
            });
        },
        watch: {
            open(v) {
                if (v) {
                    document.body.style.overflow = "hidden";
                } else {
                    document.body.style.overflow = "visible";
                }
            },
        }
    })
</script>